
Hint: u probably need ffx or chrome to run this
<div id="container" style="width: 300px; height: 300px">
</div>

<script language="javascript" type="text/javascript">
//tuts: http://www.aerotwist.com/tutorials/getting-started-with-three-js/
// http://soledadpenades.com/articles/three-js-tutorials/object-picking/ to get the element that is in foreground
//pretty good: https://plus.google.com/104300307601542851567/posts



//need kind of a js list http://www.hunlock.com/blogs/Mastering_Javascript_Arrays
//and oop: http://www.peterkropff.de/site/javascript/objektliterale.htm
var new_universe = new Array(); //TODO: is not used!?!
var old_universe = new Array(); 
var changed_universe = new Array();
//TODO: ^memory leaks on browser?



function compareUniverse() {
	$.getJSON('universe.json', function(data) {
		/* data will hold the array as a javascript object */
		if (old_universe == undefined) //if TODO its empty...
			changed_universe = $.makeArray(data); 
		else {//for each...
			//put it in an array....
			
			var oldAmount = old_universe.length; //Rem: length is not a function :/
			$.each(data, function(key, val) {
				if (key-1 > oldAmount) { //...insert...
					//TODO: XXX: critical: doesn't work if universe objects are deleted...! (as key != id!
					//Solution: have to look up and compare after transmitted id! 
					
					changed_universe.unshift(val); //add at the beginning
				} else {
					//TODO: completely wrong comparing....
					if (old_universe[key] != val) //low: use better comparism... if dVal > epsilon ;) ...
						changed_universe.unshift(val);
				}
			
			});
			
			
		}
		
		old_universe = $.makeArray(data);
		
		
		//$('#debugContent').html(old_universe[1].temp);
		
	});
	//compare with old_input_array => diffs->changed_array;
	//old_input_array = new_input_array; //=data...
	
	//changed_array-entry is set to 0  when stars and planets are moved/changed on screen.
	
	//TODO: insert setTimeout...
}

function refresh() {
	//download and fill new_input_array;
	compareUniverse();
}

var scene;
var camera;
var renderer;

function init3D() {
	// set the scene size
	var WIDTH = 400,
	  HEIGHT = 300;
	
	// set some camera attributes
	var VIEW_ANGLE = 45,
	  ASPECT = WIDTH / HEIGHT,
	  NEAR = 0.1,
	  FAR = 10000;
	
	// get the DOM element to attach to
	// - assume we've got jQuery to hand
	var $container = $('#container');
	
	// create a WebGL renderer, camera
	// and a scene
	renderer = new THREE.WebGLRenderer();
	camera =
	  new THREE.PerspectiveCamera(
	    VIEW_ANGLE,
	    ASPECT,
	    NEAR,
	    FAR);
	
	scene = new THREE.Scene();
	
	// add the camera to the scene
	scene.add(camera);
	
	// the camera starts at 0,0,0
	// so pull it back
	camera.position.z = 300;
	
	// start the renderer
	renderer.setSize(WIDTH, HEIGHT);
	
	// attach the render-supplied DOM element
	$container.append(renderer.domElement);
	
	
		
	// create a point light
	var pointLight = new THREE.PointLight(0xFFFFFF);
	
	// set its position
	pointLight.position.x = 10;
	pointLight.position.y = 50;
	pointLight.position.z = 130;
	
	
	
	// add to the scene
	scene.add(pointLight);
	
	
	//controls = new THREE.TrackballControls( camera );
	//controls.target.set( 0, 0, 0 );
	
	
	// draw!
	render();
}



function render() {
	requestAnimationFrame(render);
	
	if (changed_universe.length != 0) { 
		//as it's all the time rendering we can do it like this....
		var val = changed_universe.pop();
		var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
		
		if (val.temp == 6000) {
			sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
		}
		// set up the sphere vars
		//TODO: generate these parameters from Planet's radius
		var radius = 50,
		    segments = 16,
		    rings = 16;
		
		//TODO: set position!
		//set color!
		scene.add(new THREE.Mesh(

				  new THREE.SphereGeometry(
				    radius,
				    segments,
				    rings),
				
				  sphereMaterial));
		
		
	}
	
	
	//Moving Code:
	
	
	renderer.render(scene, camera);
} 

init3D();

compareUniverse();

</script>